/*
 * @Author: mayijun
 * @Date: 2022-05-11 09:46:18
 * @LastEditors: mayijun
 * @LastEditTime: 2022-06-11 14:58:44
 */
//查询条件
import { ElFormItem, ElMessage } from "element-plus";
import { defineComponent, onMounted, PropType, reactive, ref, toRaw } from "vue";
import SearchForm from "@/components/SearchForm";
import TableSearchSelect from "@/components/TableSearchSelect";
import './index.scss';
import API from "@/services";

const SearchBar = defineComponent({
  name: 'SearchBar',
  props: {
    currentTab: {
      type: String as PropType<string>,
      default: () => 'task'
    },
    search: {
      type: Function,
      default: () => ''
    }
  },
  emits: ['changeActive'],
  setup: (props, { slots, attrs, emit }) => {

    /* form实例 */
    const formRef: any = ref();

    const state: any = reactive({
      searchForm: {
        createDate: '',
        status: "",
        cycleType: '',
        keyWords: ''
      },
      tabIndex: props.currentTab,
      typeList: [] as any[],
      statusList: [] as any[],
    });

    const handleTabClick = (tab: any, event: any) => {
      formRef.value.resetFields();
      //清空表单
      Object.keys(state.searchForm).forEach((key) => {
        state.searchForm[key] = "";
      });
      emit('changeActive', tab.paneName);
    }

    // 获取字典表
    const getTypesList = async () => {
      try {
        const { code, data } = await API.enumBao.getTaskCycleType();
        if (code === 200) {
          data?.unshift(
            { value: '', label: '全部' },
            { value: '0', label: '临时执行' }
          );
          state.typeList = data;
        }
      } catch (error) {
        ElMessage.error('获取类型列表失败');
      }
    };

    const getStatusList = async () => {
      try {
        const { code, data } = await API.enumBao.getTaskStatus();
        if (code === 200) {

          data?.map((item: any) => {
            item.value = Number(item.value);
          });
          state.statusList = data;
          state.statusList.unshift({ value: 0, label: '全部' });

        }
      } catch (error) {
        ElMessage.error('获取状态列表失败');
      }
    };

    onMounted(() => {
      getTypesList();
      getStatusList();
    });

    return () => {
      const { search } = props;
      return (
        <>
          <SearchForm
            num={4}
            isSearchBtn={false}
            onReset={() => {
              formRef.value.resetFields();
              //清空表单
              Object.keys(state.searchForm).forEach((key) => {
                state.searchForm[key] = "";
              });
              search(state.searchForm);
            }}
            onSearch={() => search(state.searchForm)}
            model={state.searchForm}
            formRef={formRef}
          >
            <ElFormItem labelWidth={100} label="创建时间:" prop="createDate">
              <el-date-picker
                v-model={state.searchForm.createDate}
                type="daterange"
                start-placeholder="开始日期"
                range-separator="~"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                onChange={() => search(state.searchForm)}
              ></el-date-picker>
            </ElFormItem>
            {props.currentTab == "history" && (
              <ElFormItem labelWidth={100} label="状态:" prop="status">
                <TableSearchSelect
                  list={state.statusList}
                  v-model={[state.searchForm.status, 'modelVal']}
                  style={{ width: '100%' }}
                  selectConfig={{
                    onChange: () => {
                      search(state.searchForm);
                    }
                  }}></TableSearchSelect>
              </ElFormItem>
            )}

            <ElFormItem labelWidth={100} label="类型:" prop="cycleType">
              <TableSearchSelect
                list={state.typeList}
                v-model={[state.searchForm.cycleType, 'modelVal']}
                style={{ width: '100%' }}
                selectConfig={{
                  onChange: () => search(state.searchForm)
                }}></TableSearchSelect>
            </ElFormItem>

            <ElFormItem labelWidth={100} label="关键字:" prop="keyWords">
              <el-input
                v-model={state.searchForm.keyWords}
                placeholder="请输入"
                onKeyup={() => search(state.searchForm)}
                clearable
                size="large"
                style={{ width: '100%' }}
              ></el-input>
            </ElFormItem>
          </SearchForm >
          <div class="search-addons">
            <el-tabs v-model={state.tabIndex} onTab-click={handleTabClick}>
              <el-tab-pane label=" 取数任务 " name="task" />
              <el-tab-pane label=" 取数历史 " name="history" />
            </el-tabs>
          </div >
        </>
      );
    }
  }
});

export default SearchBar;